<%--
  Created by IntelliJ IDEA.
  User: tulufan
  Date: 2021/10/16
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单预定</title>
    <script src = "${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/order_reserve.css" rel="stylesheet">
    <link rel="icon" type="images/x-icon" href="${pageContext.request.contextPath}/image/toubiao.jpg">
</head>
<body>


<!--================================main的主体部分===============================-->
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}/index" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/house_owner/houseadd.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">房源订单中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/order">房源订单中心</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">个人中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/personalCenter">个人中心</a> </li>
            </c:if>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="image/regist-logo.svg" >
                <span class="login-title">注册</span>
            </a>
        </c:if>

        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="${pageContext.request.contextPath}/logout">退出</a>
        </c:if>
    </div>
</div>
</div>
<div class="main">
    <div class="main-left">
        <div class="row">
            <div class="leftheada" >
                <a href="" >
                    <button class="headbutton"></button>
                </a>
                <strong class="headtext">确认并支付</strong>
            </div>
            <div class="leftheadb">
                <div class="leftheadb-a">
                    <div class="lefthead-a-a">
                        <strong>放心预定该房源</strong>
                    </div>
                    <div class="lefthead-a-c">
                        <button class="lefthead-a-c-btn"></button>
                    </div>
                    <div class="lefthead-a-b">
                        <span>放心订！入住 24 小时前可免费取消 😊</span>
                    </div>
                </div>
                <div class="leftheadb-b">
                    <strong>您的行程</strong>
                </div>
                <div class="leftheadb-c">

                    <form action="${pageContext.request.contextPath}/ali/pay" method="post">
                        <input type="hidden" name="orderId" value="${order.orderId}" >
                        <input type="hidden" name="hotelId" value="${hotel.hotelId}">
                        <input type="hidden" name="hotelName" value="${hotel.hotelName}" >

                        <div class="lefthead-a-a">
                                <strong>订单编号:</strong>
                            <input type="text" name="orderNumber" value="${order.orderNumber}" readonly style="border: none;width: 240px;margin-left: 27px">
                        </div>

                        <div class="lefthead-a-a">
                            <strong>订单总价格:</strong>
                            <input type="text" name="orderPrice" value="${order.orderPrice}" readonly style="border: none;width: 240px;margin-left: 10px">
                        </div>

                        <div class="lefthead-a-a">
                            <strong>日期</strong>
                            <span>
                                    <fmt:formatDate value="${order.orderStartDate}" pattern="yyy-MM-dd"/>
                                     -
                                      <fmt:formatDate value="${order.orderEndDate}" pattern="yyy-MM-dd"/>
                                </span>
                        </div>

                        <div class="leftzhifu">
                            <div class="leftfukuanfangshia">
                                <strong>支付方式：</strong>
                            </div>
                            <div class="leftfukuanfangshib">
                                <button class="zhifubao">
                                    <input type="submit" class="zhi" value="支付宝" style="border:none;background-color: white"/>
                                </button>
                                <button class="zhifu"></button>
                            </div>
                        </div>

                    </form>







           <%--     <div class="leftheadb-d">
                    <div class="lefthead-a-a">
                        <strong>房客人数</strong>
                    </div>
                    <div class="lefthead-a-b">
                        <span>1位房客</span>
                    </div>
                </div>
                <div class="leftheadb-e">
                    <div class="lefthead-a-a">
                    <strong>请联系房东开具发票</strong>
                </div>
                    <div class="leftheadb-f">
                        <span>请联系房东确认开票事宜后再预订</span>
                    </div>
                </div>--%>
            </div>
        </div>

            <%--<div class="leftfukuanfangshic">
                <button class="coupon_list"><strong>输入优惠券</strong></button>
                <ul class="coupon">
                    <li>
                        <div class="left" >
                            <span>优惠券条件</span>
                            <span>price</span>
                        </div>
                        <div class="right">
                            <span>startDate</span>
                            <span>endDate</span>
                        </div>
                    </li>
                </ul>
                <div class="page_coupon"></div>
            </div>--%>
        </div>
        <div class="leftchuxing">
            <div class="lefthead-a-a">
                <strong>房客信息</strong>
            </div>
            <div class="lefthead-a-c">
            </div>
            <div class="lefthead-a-b">
                <span>中国政府要求所有旅行者提供此信息。</span>
            </div>
        </div>
        <div class="quxiaozhengce">
            <div class="quxiaozhengcea">
                <strong class="leftheadb-b-a">取消政策</strong>
            </div>
            <div class="quxiaozhengceb"><button class="littleblank"></button>
                <h4>48小时内免费取消预订 9月30日下午3点-10月1日下午3点期间取消，扣除首晚房费后，退还剩余房费和全部清洁费。</h4>
                <a href="">了解详情</a>
            </div>
            <div class="quxiaozhengcec">
                <span class="">我们的特殊情况政策不适用于新冠肺炎疫情造成的旅行中断。</span>
                <a href="">了解详情</a>
            </div>
        </div>
        <div class="leftfooter"><button class="littleblank"></button>
            <h4>
                点击下方按钮即代表我同意房东的入住须知、爱彼迎针对新冠肺炎疫情的安全要求和房客退款政策。
            </h4>
            <button class="leftfooterbtn">确认并付款</button>
        </div>
    </div>

    <div class="main-right" style="height:501.6px">
        <div class="main-rightmain">
            <div class="righta">
                <div class="fangzi">
                </div>
                <div class="fangzia">
                    <span>${hotel.hotelType}</span>
                </div>
                <div class="fangzib">
                    <span>${hotel.hotelName}</span>
                </div>
                <div class="fangzid">
                    <button class="wujiaoxing"></button>
                    ${hotel.hotelAvgscore}
                    (14条评价)
                    <button class="chaozan"></button>
                    超赞房东
                </div>
            </div>
            <div class="rightb">
                <div class="rightba">
                    <strong>
                        价格详情
                    </strong>
                </div>
                <div class="rightbb">
                    <button class="littleblank"></button>
                    <span class="money">${hotel.hotelPrice} x 1 晚</span>
                    <span class="moneya">${hotel.hotelPrice}</span>
                </div>
                <div class="rightbc">
                    <a href="" class="money">国庆特惠 8 折</a>
                    <span class="moneyc">-￥${hotel.hotelPrice*0.2}</span>
                </div>
                <div class="rightbd">
                    <button class="littleblank"></button>
                    <a href="" class="money">服务费</a>
                    <span class="moneyc">-￥0.00</span>
                </div>
                <div class="rightbe">

                    <a href="" class="money">总价 (CNY)</a>
                    <span class="moneya">
                        <input type="text" name="orderPrice" value="5520.0" style="border: none;font-size: 18px;margin-left: 80px;width: 60px">
                    </span>
                </div>
            </div>

        </div>
        <div class="leftfukuanfangshic" style="margin-left: 130px">
            <button class="coupon_list"><strong>输入优惠券</strong></button>
            <ul class="coupon">

            </ul>
            <div class="page_coupon"></div>
        </div>
        <script>
            $(".coupon_list").click(function () {
                var url = "saveorder";
                var data = {"cusId":${loginCustomer.cusId},
                            "orderNum":"${order.orderNumber}"}
                $.get(
                    url,
                    data,
                    function (result) {
                        console.log(result);
                        var array = result.data;
                        if (array !=null ){
                            for (var i=0;i<array.length;i++){
                                var ele='<li>\n' +
                                    '                        <div class="left" >\n' +
                                    '                            <span>'+array[i].couponLimit+'</span>\n' +
                                    '                            <span>'+array[i].couponPrice+'</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="right">\n' +
                                    '                            <span>'+array[i].couponStartDate+'</span>\n' +
                                    '                            <span>'+array[i].couponEndDate+'</span>\n' +
                                    '                        </div>\n' +
                                    '                        <button class="couponId">使用<span class="Id">'+array[i].couponId+'</span>号优惠券</button>\n' +
                                    '                    </li>';
                                $(".coupon").append(ele);
                            }
                        }

                    },
                    "json"
                );
            });
            $(".couponId").click(function () {
                var url1 = "order_payment/order_reserve";
                var data1={
                    "couponId":$("Id").innerText
                }
                $.get(
                    url1,
                    data1,
                    function (result) {
                        console.log(result);
                    }
                );
            });
        </script>
    </div>
</div>
<script>
    //1. 点击提交表单
    $(".saveBtn").click(function (){
        //2. 获得表单中所有数据
        var formData =   $(".saveform").serialize();
        console.log("表单的数据：" + formData);
        var url="${pageContext.request.contextPath}/Myorder/myorder";
        var dataType ="json";
        var Data = {orderStartDate:$(".starttime").innerText,
                    orderEndDate:$(".endtime").innerText,

        }
        //3. 产生ajax 请求
        //  $.post(url,formData,"成功回调", dataType);
        function formatDate(date) {
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            return YY + MM + DD ;
        }

        $.ajax({
            type:'POST',
            url,
            Data,
            function(result) {
               // $(".starttime").innerText(formatDate());
               // $(".endtime").innerText(formatDate());
                //console.log("result:" + result);//JS
               // console.log("json result:" + JSON.stringify(result));//JS
                $(".save_msg").text(result.reason);
            },
            dataType
            }
        );
        //4. 获得服务器返回数据：添加成功 / 添加失败 消息显示
    })

</script>
</body>
</html>